<template>
  <div class="app-container">
    <table-list
      ref="tableList"
      :columns="columns"
      :default-data="defaultData"
      :do-add="doAdd"
      :do-edit="doEdit"
      :do-multi-delete="doMultiDelete"
      :form-items="formItems"
      :form-rules="formRules"
      :get-list="getList"
      :search-obj="searchObj"
    />
  </div>
</template>

<script>
  import TableList from '@/components/TableList'
  import { getList, doAdd, doEdit, doMultiDelete } from '@/api/pub'
  export default {
    components: { TableList },
    data() {
      return {
        getList,
        doAdd,
        doEdit,
        doMultiDelete,
        defaultData: {
          id: '',
          created_user: '',
          created_at: '',
          pics: [],
          content: '',
        },
        columns: [
          { type: 'checkbox', width: 70 },
          { type: 'seq', width: 80 },
          { field: 'created_user', title: '用户' },
          {
            field: 'content',
            title: '内容',
          },
          { field: 'created_at', title: '时间' },
          {
            field: 'user_id',
            title: '发布者',
            slots: { default: 'userId' },
          },
          {
            field: 'action',
            title: '操作',
            slots: { default: 'action' },
            width: 200,
          },
        ],
        formItems: [
          {
            field: 'created_user',
            title: '用户',
            span: 12,
            itemRender: {
              name: 'VxeInput',
              props: { placeholder: '用户', clearable: true },
            },
          },
          {
            field: 'created_at',
            title: '时间',
            span: 12,
            itemRender: {
              name: 'VxeDatePicker',
              props: { placeholder: '时间', type: 'datetime', clearable: true },
            },
          },
          {
            field: 'pics',
            title: '图片',
            span: 24,
            itemRender: {
              name: 'VxeUpload',
              props: {
                mode: 'image',
                multiple: true,
                showButtonText: false,
                dragSort: true,
                limitCount: 9,
                urlMode: true,
                imageConfig: {
                  width: 40,
                  height: 40,
                },
                uploadMethod: this.uploadMethod,
              },
            },
          },
          {
            field: 'content',
            title: '内容',
            span: 24,
            itemRender: {
              name: 'VxeTextarea',
              props: {
                placeholder: '内容',
                autosize: { minRows: 2, maxRows: 4 },
              },
            },
          },
        ],
        formRules: {
          created_user: [{ required: true, message: '请输入名称' }],
          created_at: [{ required: true, message: '请输入时间' }],
        },
        searchObj: {
          collapseNode: false,
          items: [
            {
              field: 'created_user',
              title: '用户',
              span: 4,
              itemRender: { name: 'VxeInput', defaultValue: '' },
            },
            {
              field: 'created_at',
              title: '时间',
              span: 4,
              itemRender: { name: 'VxeDatePicker', multiple: true },
            },
          ],
        },
      }
    },
    methods: {
      uploadMethod({ file }) {
        return this.$refs.tableList.uploadMethod({ file }, 'pics', true)
      },
    },
  }
</script>

<style lang="scss" scoped></style>
